<template>
    <f7-page>
        <f7-photo-browser
                :photos="photos"
                theme="dark"
                ref="standaloneDark"
        ></f7-photo-browser>


        <f7-row class="margin-top">
            <f7-col>
                <div class="" style="text-align: right;">

                    <f7-link  @click="$refs.standaloneDark.open(5)">
                        <div>
                            <div>
                                <img src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="100" />
                            </div>
                            <!--<span>附近人</span>-->
                        </div>
                    </f7-link>
                </div>
            </f7-col>
        </f7-row>

        <f7-link @click="$refs.standaloneDark.open(5)">Standalone</f7-link>
    </f7-page>
</template>
<script>
    export default {
        data() {
            return {
                photos: [
                    {
                        url: 'img/beach.jpg',
                        caption: 'Amazing beach in Goa, India',
                    },
                    'http://placekitten.com/1024/1024',
                    'img/lock.jpg',
                    {
                        url: 'img/monkey.jpg',
                        caption: 'I met this monkey in Chinese mountains',
                    },
                    {
                        url: 'img/mountains.jpg',
                        caption: 'Beautiful mountains in Zhangjiajie, China',
                    },
                ],
            };
        },
        beforeMount() {
            // this.$refs.standaloneDark.open(3);
        }
    }
</script>
